<template>
    <div>
        <div id="main" style="width: 2500px;height:1500px;"></div>
    </div>

    <el-dialog
    v-model="dialogVisible"
    title="菜单"
    width="30%"
    align-center
  >
    <span>请选择:</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button v-show="startId == null" type="primary" @click="setStartId()">起点站</el-button>
        <el-button v-show="endId == null" type="primary" @click="setEndId()">
          终点站
        </el-button>
        <el-button @click="cancelSelect()">
          取消选择
        </el-button>
      </span>
    </template>
  </el-dialog>

</template>
  
<script>
import * as echarts from 'echarts'
import { getAllVNode, getAllEdges,getAllPaths } from '../http/api'
export default {
    name: "CarpiaoPage",
    data() {
        return {
            // 随便的数据
            staNodes: [],
            links: [],
            nodeMap: {},
            dialogVisible: false,
            startId: null,
            endId: null,
            currNode: null,
            paths: [],
        }
    },
    mounted() {
        Promise.all([getAllVNode(),getAllEdges()])
        .then(results => {
            this.VNodesToData(results[0]);
            this.EdgesToLinks(results[1]);
            this.load();
        })
    },
    methods: {
        resetNodeColor() {
            for(let node of this.staNodes) {
                if(this.include(this.paths, node.staId)) {
                    node.itemStyle.color = null;
                }
            }
            this.load();
        },
        cancelSelect() {
            let node = this.currNode;
            if(this.startId == node.staId) {
                this.startId = null;
            }
            if(this.endId == node.staId) {
                this.endId = null;
            }
            this.dialogVisible = false;
        },
        setStartId() {
            let node = this.currNode;
            this.startId = node.staId;
            this.dialogVisible = false;
            this.resetNodeColor();
            this.showAllPaths();
        },
        setEndId() {
            let node = this.currNode;
            this.endId = node.staId;
            this.dialogVisible = false;
            this.resetNodeColor();
            this.showAllPaths();
        },
        showAllPaths() {
            if(this.startId != null && this.endId != null) {
                getAllPaths(this.startId, this.endId).then(paths => {
                    for(let i=0;i<this.staNodes.length;i++) {
                        if(this.include(paths, this.staNodes[i].staId)) {
                            this.staNodes[i].itemStyle.color = 'red';
                        }   
                    }
                    this.paths = paths;
                    this.load();
                    this.startId = null;
                    this.endId = null;
                });
            }
        },
        include(paths, staId) {
            for(let path of paths) {
                for(let id of path) {
                    if(id == staId) {
                        return true;
                    }
                }
            }
            return false;
        },
        // 使用index关联起来
        load() {
            var chartDom = document.getElementById('main')
            var myChart = echarts.init(chartDom)
            var option
            option = {
                title: {
                    text: '广州地铁线路图'
                },
                tooltip: {},
                animationDurationUpdate: 1500,
                animationEasingUpdate: 'quinticInOut',
                // backgroundColor: '#d0d9c2',
                series: [
                    {
                        type: 'graph',
                        layout: 'none',
                        symbolSize: 13,//节点大小为17
                        roam: true,
                        selectedMode: false,
                        select: {
                            itemStyle: {//给所有节点的类型一个默认样式，特殊的可在其节点下单独修改样式
                                color: "red",
                                borderColor: "#009900"//边框默认绿色
                            },
                            label: {
                                show: true
                            }
                        },
                        itemStyle: {//给所有节点的类型一个默认样式，特殊的可在其节点下单独修改样式
                            color: "#FFFFFF",//颜色默认白色
                            borderColor: "#009900"//边框默认绿色
                        },
                        label: {//给所有的节点字体一个默认样式
                            show: true,//显示
                            position: "bottom",//下方显示
                            color: "#000",//默认颜色灰色
                            fontSize: 12//字体样式
                        },
                        lineStyle: {//给所有连线一个默认样式
                            width: 2,
                            color: "#009900"
                        },
                        data: this.staNodes,
                        links: this.links,
                    }
                ]
            }
            option && myChart.setOption(option)
            myChart.on('dblclick', params => {
                // console.log(params);
                if(params.data.name != undefined) {
                    this.dialogVisible = true; 
                    this.currNode = params.data;   
                }
            })
        },
        VNodesToData(nodes) {
            let origin = [0,0];
            let datas = [];
            for (let i = 0; i < nodes.length; i++) {
                let data = { staId: nodes[i].staId, name: nodes[i].staName, x: nodes[i].x-origin[0], y: nodes[i].y-origin[1] };
                if (nodes[i].staType == 1) {
                    data.symbol = 'image://' + require('../assets/update.png');
                    data.symbolSize = 20;
                }
                data.itemStyle = {borderColor: nodes[i].staColor };
                datas.push(data);
                this.nodeMap[nodes[i].staId] = nodes[i];
            }
            console.log(datas);
            this.staNodes = datas;
        },
        EdgesToLinks(edges) {
            let links = [];
            for (let i = 0; i < edges.length; i++) {
                let data = { source: edges[i].sourceStaName, target: edges[i].targetStaName };
                data.lineStyle = { color: this.nodeMap[edges[i].sourceStaId].staColor };
                links.push(data);
            }
            console.log(links);
            this.links = links;
        }
    },
}
</script>

<style scoped>
/* .dialog-footer button:first-child {
  margin-right: 10px;
} */
</style>
  
  
  